var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var roboto = new google.maps.LatLng(10.772297, 106.679467);
  var mapOptions = {
    zoom: 17,
    center: roboto,
    scrollwheel: false,
    linksControl: false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
     disableDefaultUI: true
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);
  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
  
  var marker = new google.maps.Marker({
      position: roboto,
      map: map,
      title: 'Roboto Entertainment'
  });
  
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('direc-start').value,
      roboto = new google.maps.LatLng(10.772297, 106.679467);
      if(start != "") {
        start = start+", Ho Chi Minh";
      } else {
        return false;
      }
      
  var request = {
      origin:start,
      destination:roboto,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '20px 40px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '0px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '20px'; 
  controlWrapper.style.height = '20px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '20px'; 
  zoomInButton.style.height = '20px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("/wp-content/themes/roboto/assets/images/zoom-add.gif")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '20px'; 
  zoomOutButton.style.height = '18px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("/wp-content/themes/roboto/assets/images/zoom-sub.gif")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}